<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="消息详情" width="75%">
    <div>
      <BasicForm @register="registerForm" :actionColOptions="{ span: 24 }" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { messageDetailApi } from '@/api/message/message';

  const schemas: FormSchema[] = [
    {
      field: 'id',
      component: 'Input',
      label: '编码：',
      componentProps: { readonly: true, bordered: false, placeholder: '' },
      ifShow: ({ values }) => {
        return values.id && values.id > 0;
      },
      colProps: {
        span: 24,
      },
      defaultValue: '',
    },
    {
      field: 'name',
      component: 'Input',
      label: '姓名：',
      colProps: {
        span: 12,
      },
      defaultValue: '',
      componentProps: { readonly: true, bordered: false, placeholder: '' },
    },
    {
      field: 'phone',
      component: 'Input',
      label: '联系方式：',
      colProps: {
        span: 12,
      },
      componentProps: { readonly: true, bordered: false, placeholder: '' },
    },
    {
      field: 'content',
      component: 'InputTextArea',
      label: '内容：',
      defaultValue: '',
      componentProps: { readonly: true, placeholder: '' },
      colProps: {
        span: 24,
      },
    },
    {
      field: 'ip',
      component: 'Input',
      label: 'ip：',
      defaultValue: '',
      componentProps: { readonly: true, bordered: false, placeholder: '' },
      colProps: {
        span: 24,
      },
    },

    {
      field: 'agent',
      component: 'InputTextArea',
      label: 'agent',
      defaultValue: '',
      componentProps: { readonly: true, placeholder: '' },
      colProps: {
        span: 24,
      },
    },
  ];
  const [registerForm, { resetFields, setFieldsValue }] = useForm({
    labelWidth: 120,
    schemas,
    showResetButton: false,
    showSubmitButton: false,
    actionColOptions: {
      span: 24,
    },
  });
  const [register] = useDrawerInner((id) => {
    // 方式1
    console.log(id);
    if (id > 0) {
      resetFields();
      setFieldsValue({
        id: '',
        title: '',
        summary: '',
        status: 0,
        content: '',
      });
      messageDetailApi(id).then((data) => {
        console.log(data);
        setFieldsValue(data);
      });
    } else {
      resetFields();
      setFieldsValue({
        status: 0,
        content: '',
      });
    }
  });
</script>
